<template>
  <div class="page" v-show="show">
    <div class="pagelist">
      <a
        class="jump"
        :class="{ disabled: pstart }"
        :href="href.replace('index', Number(currentPage) - 1)"
        ><i class="el-icon-arrow-left"></i
      ></a>
      <a v-show="currentPage > 5" class="jump" :href="href.replace('index', 1)"
        >1</a
      >
      <span class="ellipsis" v-show="efont">...</span>
      <a
        class="jump"
        v-for="num in indexs"
        :class="{ bgprimary: currentPage == num }"
        :href="href.replace('index', num)"
        >{{ num }}</a
      >
      <span class="ellipsis" v-show="ebehind">...</span>

      <a
        :class="{ disabled: pend }"
        class="jump"
        :href="href.replace('index', Number(currentPage) + 1)"
        ><i class="el-icon-arrow-right"></i
      ></a>
      <a
        v-show="currentPage < totalPage - 4"
        class="jump"
        :href="href.replace('index', totalPage)"
        >{{ totalPage }}</a
      >

      <span class="jumppoint">前往</span>
      <span class="jumpinp"
        ><input
          type="text"
          v-model.lazy="changePage"
          @change="jumpPage(changePage)"
        />页</span
      >
    </div>
  </div>
</template>
<script>
export default {
  name: 'pagination',
  data() {
    return {
      changePage: '', //跳转页.
      totalPage: 1
    }
  },
  props: {
    total: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 30
    },
    currentPage: {
      default: 1
    },
    href: {
      type: String
    }
  },
  watch: {
    total: {
      handler(val) {
        this.totalPage = Math.ceil(val / this.pageSize)
      },
      immediate: true //对初始值进行监听
    }
  },
  computed: {
    show: function () {
      return this.totalPage && this.totalPage != 1
    },
    pstart: function () {
      return this.currentPage == 1
    },
    pend: function () {
      return this.currentPage == this.totalPage
    },
    efont: function () {
      if (this.totalPage <= 7) return false
      return this.currentPage > 5
    },
    ebehind: function () {
      if (this.totalPage <= 7) return false
      var nowAy = this.indexs
      return nowAy[nowAy.length - 1] != this.totalPage
    },
    indexs: function () {
      var left = 1,
        right = this.totalPage,
        ar = []
      if (this.totalPage >= 7) {
        if (this.currentPage > 5 && this.currentPage < this.totalPage - 4) {
          left = Number(this.currentPage) - 3
          right = Number(this.currentPage) + 3
        } else {
          if (this.currentPage <= 5) {
            left = 1
            right = 7
          } else {
            right = this.totalPage

            left = this.totalPage - 6
          }
        }
      }
      while (left <= right) {
        ar.push(left)
        left++
      }
      return ar
    }
  },
  methods: {
    jumpPage: function (index) {
      location.href = this.href.replace('index', index)
    }
  },
  created() {}
}
</script>
<style scoped>
.page {
  height: 40px;
  text-align: center;
  font-weight: bold;
  margin: 20px auto 0;
  color: #888;
}

.pagelist {
  height: 50px;
  line-height: 50px;
}

.pagelist span {
  font-size: 14px;
}

.pagelist .jump {
  padding: 5px 8px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 5px;
  background-color: #f4f4f5;
  color: #888;
}

.pagelist .bgprimary {
  cursor: default;
  color: #fff;
  background: #409eff;
}

.jumpinp input {
  width: 40px;
  height: 26px;
  font-size: 13px;
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
  margin: 0 6px;
  color: #888;
}

.ellipsis {
  padding: 0px 8px;
}

.jumppoint {
  margin-left: 30px;
}

.pagelist .gobtn {
  font-size: 12px;
}

.bgprimary {
  cursor: default;
  color: #fff;
  background: #337ab7;
  border-color: #337ab7;
}

.pagelist .jump.disabled {
  pointer-events: none;
  background: #ddd;
}
</style>
